<template>
    <!-- 幸福通知存 -->
    <div class="madp-financial-saving">
        <div class="madp-info-card">
            <div class="madp-info-card-head">
                <img src="@/assets/img/financialShop/three-left.png" alt />
                <span>产品优势</span>
                <img src="@/assets/img/financialShop/three-right.png" alt />
            </div>
            <div class="madp-info-card-content1">
                <div>
                    <img src="@/assets/img/financialShop/three-icon1.png" alt />
                    <p>安全</p>
                    <span>储蓄存款</span>
                </div>
                <div>
                    <img src="@/assets/img/financialShop/three-icon2.png" alt />
                    <p>灵活</p>
                    <span>随时存取</span>
                </div>
                <div>
                    <img src="@/assets/img/financialShop/three-icon3.png" alt />
                    <p>省心</p>
                    <span>自动转存</span>
                </div>
            </div>
        </div>
        <div class="madp-info-card">
            <div class="madp-info-card-head">
                <img src="@/assets/img/financialShop/three-left.png" alt />
                <span>计息规则</span>
                <img src="@/assets/img/financialShop/three-right.png" alt />
            </div>
            <div class="madp-info-card-content2">
                <div class="content-item">
                    <p>起存金额</p>
                    <span>5万元(含)起存</span>
                </div>
                <div class="content-item">
                    <p>计息方式</p>
                    <span>按起存金额差异化计息（利率见下图），每七天本息自动转存。非到期日提前支取资金的当期利息将按活期利率计付。</span>
                </div>
                <div id="charts"></div>
            </div>
        </div>
        <div class="madp-info-card">
            <div class="madp-info-card-head">
                <img src="@/assets/img/financialShop/three-left.png" alt />
                <span>常见问题</span>
                <img src="@/assets/img/financialShop/three-right.png" alt />
            </div>
            <el-collapse v-model="activeName" accordion>
                <el-collapse-item v-for="(item, index) in collapses" :key="index" :title="item.title" :name="index">
                    <div>{{ item.content }}</div>
                </el-collapse-item>
            </el-collapse>
        </div>
        <share-btn :shareInfo="shareInfo" />
        <back-btn />
        <buy-btn btnText="立即存入" prodType="3" />
    </div>
</template>
<script>
    import financialApi from '@/api/financial-shop.js';
    import buyBtn from '@/components/buy-btn';
    import shareBtn from '@/components/share-btn';
    import backBtn from '@/components/back-btn.vue';
    import mxInitWxConfig from '@/mixin/mxInitWxConfig.js';
    export default {
        name: 'madp-financial-saving-product',
        components: { buyBtn, shareBtn, backBtn },
        mixins: [mxInitWxConfig],
        data() {
            return {
                shareInfo: {},
                info: {
                    data: [],
                    label: []
                },
                activeName: '',
                collapses: [
                    {
                        title: '幸福通知存（7天通知）”是什么业务？',
                        content:
                            '幸福通知存（7天通知）”是在原“周周赢”存款基础上推出的储蓄存款业务；“幸福通知存（7天通知）” 5万起存，7天未支取本息自动转存，具有“资金安全享安心、随心操作享便利”等特点。'
                    },
                    {
                        title: '幸福通知存（7天通知）”业务资金安全吗？',
                        content: '幸福通知存（7天通知）”属于存款业务，能完全满足客户对于资金安全的需求。'
                    },
                    {
                        title: '“幸福通知存（7天通知）”如何计付利息？',
                        content:
                            '每笔“幸福通知存（7天通知）”存款周期为7天；如提前支取，支取金额按活期存款利率计付息；到期当天一次性全额支取或未支取当晚自动转存，均按原金额档利率计付息；自动转存后本息转为1笔新的“幸福通知存（7天通知）”存款，按照转存资金额执行新金额档利率。'
                    },
                    {
                        title: '“幸福通知存（7天通知）”在哪里办理？',
                        content: '您可在我行网点轻型柜台、网上银行、手机银行等任一渠道办理“幸福通知存（7天通知）”业务的存入、支取、查询交易；特别建议使用手机银行办理，更方便快捷。'
                    },
                    {
                        title: '办理“幸福通知存（7天通知）”收手续费吗？',
                        content: '“幸福通知存（7天通知）”的存入、支取、信息查询交易均不收取手续费。'
                    }
                ]
            };
        },
        watch: {
            wxUserId() {
                if (this.wxUserId) {
                    let params = this.$route.query;
                    this.type = params.type;
                    this.getDepositList();
                }
            }
        },
        created() {},
        mounted() {},
        activated() {
            let params = this.$route.query;
            document.title = params.titleName || '幸福通知存';
            // this.type = params.type
            // this.getDepositList()
            this.shareInfo = {
                title: params.titleName || '幸福通知存', // 分享标题
                desc: '五万起存，每7天自动转存，活期便利，定期收益', // 分享描述
                link: this.$utils.getShareUrl(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: `${this.$utils.apiUrl}/mfs/avatar.jpg`
            };
            console.log('pppp', this.shareInfo);
            this.$wxShare.setShareInfo(this.shareInfo);
        },
        deactivated() {
            this.wxUserId = '';
        },
        methods: {
            initChart() {
                let charts = this.$echarts.init(document.getElementById('charts'));
                charts.setOption({
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: this.info.label,
                        position: 'bottom',
                        offset: 0, // 轴相对默认位置的偏移
                        nameLocation: 'end', // 轴相对位置
                        nameTextStyle: {
                            // 坐标轴名称样式
                            color: 'red',
                            padding: [5, 0, 0, -5]
                        },
                        nameGap: 15, // 坐标轴名称与轴线之间的距离
                        nameRotate: 0, // 坐标轴名称旋转
                        axisLine: {
                            // 坐标轴 轴线
                            show: true,
                            symbol: ['none', 'none'], // 是否显示轴线箭头
                            lineStyle: {
                                // 线
                                color: '#999',
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisTick: {
                            // 坐标轴 刻度
                            show: false
                        },
                        axisLabel: {
                            // 坐标轴 标签
                            show: true,
                            inside: false, // 是否朝内
                            rotate: 0, // 旋转角度
                            margin: 10, // 刻度标签与轴线之间的距离
                            color: '#999', // 默认取轴线的颜色
                            interval: 0
                            // formatter:(value,index)=>{
                            //   var ret = ''; // 拼接加\n返回的类目项
                            //   var maxLength = 6; // 每项显示文字个数
                            //   var valLength = value.length; // x轴类目的文字个数
                            //   var rowN = Math.ceil(valLength / maxLength); // 需要换行的行数
                            //   if(rowN>1){ // 如果文字大于5
                            //     for( var i = 0; i < rowN; i++){
                            //       var temp = ''; // 每次截取的字符串
                            //       var start = i * maxLength; // 开始截取的位置
                            //       var end = start + maxLength; // 结束截取的位置
                            //       temp = value.substring(start,end) + "\n"
                            //       ret += temp // 最终的字符串
                            //     }
                            //     return ret;
                            //   }else{
                            //     return value
                            //   }
                            // }
                        }
                    },
                    yAxis: {
                        show: true,
                        position: 'left',
                        type: 'value',
                        max: 10,
                        axisLabel: {
                            formatter: '{value}%'
                        },
                        offset: 0, // 轴相对默认位置的偏移
                        nameLocation: 'end', // 轴相对位置
                        nameTextStyle: {
                            // 坐标轴名称样式
                            color: '#999',
                            padding: [5, 0, 0, -5]
                        },
                        nameGap: 15, // 坐标轴名称与轴线之间的距离
                        nameRotate: 0, // 坐标轴名称旋转
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#999',
                                width: 1,
                                type: 'dashed'
                            }
                        }
                    },
                    series: [
                        {
                            name: '利率',
                            type: 'bar',
                            legendHoverLink: true,
                            label: {
                                // 图形上的文本标签
                                show: false
                            },
                            itemStyle: {
                                // 图形的形状
                                // color:'#FFA3A3',
                                normal: {
                                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: '#FFA3A3' },
                                        { offset: 1, color: '#ED5555' }
                                    ]),
                                    label: {
                                        show: true,
                                        position: 'top',
                                        formatter(val) {
                                            if (val) {
                                                return val.value + '%';
                                            } else {
                                                return '';
                                            }
                                        },
                                        textStyle: {
                                            color: '#ed5555',
                                            fontSize: 12
                                        }
                                    }
                                },
                                barBorderRadius: [2, 2, 0, 0]
                            },
                            barWidth: 30, // 柱形的宽度
                            barCategoryGap: '20%', // 柱形的间距
                            data: this.info.data
                        }
                    ]
                });
            },
            // 存款信息
            getDepositList() {
                this.info = {
                    data: [],
                    label: []
                };
                financialApi
                    .getDepositList({
                        type: this.type
                    })
                    .then((res) => {
                        let list = res.data.data;
                        list.map((ele) => {
                            this.info.data.push(ele.rate);
                            if (ele.descr.includes('~')) {
                                this.info.label.push(`${ele.descr.split('~')[0]}~\n${ele.descr.split('~')[1]}`);
                            } else if (ele.descr.includes('万')) {
                                let idx = ele.descr.indexOf('万');
                                this.info.label.push(`${ele.descr.slice(0, idx + 1)}\n${ele.descr.slice(idx + 1)}`);
                            } else {
                                this.info.label.push(`${ele.descr.slice(0, 4)}\n${ele.descr.slice(4)}`);
                            }
                            // this.info.label.push(ele.descr)
                        });
                        this.initChart();
                        let params = this.$route.query;
                        console.log('id', this.$route.query.wxUserId || this.$store.state.vuex_wxUserId || this.wxUserId);
                        this.$sensorsSend('DepositView', {
                            from_page_name: sessionStorage.getItem('from_page_name') || '',
                            recommend_id: this.$route.query.wxUserId || this.$store.state.vuex_wxUserId || this.wxUserId,
                            deposit_type: params.titleName,
                            deposit_number: params.type,
                            deposit_name: params.titleName
                        });
                    });
            }
        }
    };
</script>
<style scoped lang="scss">
    .madp-financial-saving {
        width: 100%;
        min-height: 100vh;
        // overflow-y: scroll;
        padding-top: 130px;
        background-image: url('../../assets/img/financialShop/week-home.png');
        background-position: 0 -50px;
        background-repeat: no-repeat;
        background-size: 100%;
        background-color: #efefef;
        padding-bottom: 4rem;
        .madp-info-card {
            margin: 12px 15px;
            background: #fff;
            box-shadow: 0 5px 10px rgba(211, 198, 182, 0.3);
            border-radius: 8px;
            padding: 18px 12px;
            &-head {
                display: flex;
                justify-content: center;
                margin-bottom: 20px;
                span {
                    display: inline-block;
                    margin: 0 12px;
                    font-size: 14px;
                    font-weight: bold;
                    color: #ed5555;
                }
                img {
                    width: 36px;
                    height: 4px;
                    top: 8px;
                    position: relative;
                }
            }
            &-content1 {
                margin: 15px 0;
                display: flex;
                justify-content: space-around;
                div {
                    width: 22%;
                    text-align: center;
                    color: #2c2c2c;
                    font-size: 14px;
                    img {
                        width: 50%;
                    }
                    p {
                        font-weight: 500;
                        line-height: 20px;
                    }
                    span {
                        font-weight: 400;
                        opacity: 0.5;
                        font-size: 12px;
                    }
                }
            }
            &-content2 {
                padding: 0 6%;
                margin-top: 30px;
                .content-item {
                    margin-top: 20px;
                    p {
                        border-left: 2px solid #ed5555;
                        padding-left: 6px;
                        font-weight: 600;
                        font-size: 14px;
                        margin: 4px 0;
                    }
                    span {
                        font-weight: 400;
                        padding-left: 7px;
                        color: #2c2c2c;
                        opacity: 0.5;
                        font-size: 12px;
                        display: inline-block;
                    }
                }
                #charts {
                    width: 100%;
                    height: 200px;
                    position: relative;
                }
            }
        }
        .madp-btn {
            width: 321px;
            height: 40px;
            background: #ed5555;
            border-radius: 20px;
            text-align: center;
            line-height: 40px;
            margin: 0 auto;
            font-size: 16px;
            color: #fff;
            margin-top: 3rem;
        }
    }
</style>
